<template>
  <div class="boy">
    <div>
      <van-nav-bar title="我的行程安排"   @click-left="onClickLeft" />
    </div>
    <div class="Notrip">
      <van-empty description="暂无行程安排" />
    </div>
    <div class="journey">
      <div class="GraphTitle">
        <img src="../assets/img/12091039.png" alt />
        <p>下一站:西安</p>
      </div>
      <div class="course">
        <van-steps direction="vertical" :active="3">
          <van-step v-for="(item,index) in 3" :key="index">
            <h3>【北京故宫】香山枫叶</h3>
            <p>2019.7.23 星期二</p>
            <img src="../assets/img/水上居.png" alt />
            <p>建议游玩 3 - 5 个小时</p>
          </van-step>
        </van-steps>
        <p>马上进入颐和园</p>
        <van-steps direction="vertical" :active="0">
          <van-step v-for="(item,index) in 3" :key="index">
            <h3>【北京颐和园】</h3>
            <p>2019.7.24 星期三</p>
            <img src="../assets/img/图层 3.png" alt />
            <p>建议游玩 3 - 5 个小时</p>
          </van-step>
        </van-steps>
      </div>
    </div>
        <tabbar />
  </div>
</template>

<script>
import { Toast } from "vant";
import tabbar from "@/components/Tabbar.vue";

export default {
  methods: {
    onClickLeft() {
      Toast("返回");
    }
  },
    components: {
    tabbar
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.boy {
  width: 375px;
  padding-bottom: 60px;
}
.journey{
    display: none;
}
.Notrip {
    /* display: none; */
}
.GraphTitle {
  width: 375px;
  height: 232px;
  font-size: 18px;
  position: relative;
}
.GraphTitle p {
  position: absolute;
  bottom: 10px;
  left: 11px;
  color: #333333;
}
.course > p {
  font-size: 18px;
  padding-left: 15px;
  font-weight: 900;
}
</style>